<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
    <title>后台管理 | 评论管理</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/images/favicon.ico" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        tr textarea, input {
            width: 100%;
            height: auto;
        }

        tr textarea::-webkit-scrollbar {
            height: 1px;
            width: 4px;
        }

        tr textarea::-webkit-scrollbar-thumb {
            border-radius: 1px;
            background: #000;
        }
    </style>
    <script>
        function search() {
            var kw = $("#kw").val();
            if(kw)
                window.location="${pageContext.request.contextPath}/admin/searchNote/"+kw;
        }
    </script>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-expand-sm">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link" href="${pageContext.request.contextPath}/admin//manageProduct/1">商品管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="${pageContext.request.contextPath}/admin//manageNote/1">评论区管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="${pageContext.request.contextPath}/admin//managePerson/1">用户管理</a>
            </li>
        </ul>

        <ul class="nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">${sessionScope.user}</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item"
                       onclick="showFrame('${pageContext.request.contextPath}/user/modify/',500,400)">修改个人信息</a>
                    <a class="dropdown-item" href="${pageContext.request.contextPath}/user/logout">登出</a>
                </div>
            </li>
            <li class="nav-item">
                <a target="_blank" class="nav-link btn btn-outline-primary btn-sm"
                   href="${pageContext.request.contextPath}/">首页</a>
            </li>
        </ul>
    </nav>
    <hr/>

    <div class="card bg-light text-dark">
        <div class="card-body">
            <div class="form-inline float-left" >
                <input id="kw" name="kw" class="form-control" type="text" placeholder="关键字" value="${kw}">
                <button class="btn btn-success" type="button" onclick="search()">搜索</button>
            </div>
            <strong id="sm-info" class="text-danger float-right"></strong>
        </div>
    </div>

    <table class="table">
        <thead>
        <tr class="table-primary">
            <th class="text-center">ID</th>
            <th class="text-center">标题</th>
            <th class="text-center">内容</th>
            <th class="text-center">作者</th>
            <th class="text-center">时间</th>
            <th class="text-center">回复数</th>
            <th class="text-center">商品ID</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${list}" var="note" varStatus="xh">
        <tr class="table-info">
            <td class="text-center">${xh.count}</td>
            <td class="text-center"><input id="ntitle${note.messageID}" class="form-control" type="text" value="${note.title}" readonly="readonly"/></td>
            <td class="text-center"><textarea id="ncontent${note.messageID}" class="form-control" readonly="readonly">${note.content}</textarea></td>
            <td class="text-center">${note.writer}</td>
            <td class="text-center"><fmt:formatDate value="${note.writeDate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
            <td class="text-center" data-toggle="collapse" data-target="#tr${note.messageID}" style="cursor:pointer">${note.count}</td>
            <td class="text-center"><a style="cursor:pointer" class="btn-sm" onclick="showFrame('${pageContext.request.contextPath}/detail/${note.productID}',900,800)">${note.productID}</a></td>
            <td class="text-center">
                <a class="btn btn-warning btn-sm" onclick="modifyMessage(${note.messageID})">修改</a>
                &nbsp
                <a class="text-light btn-danger btn-sm" onclick="showFrame('${pageContext.request.contextPath}/admin/deleteMessage/${note.messageID}')">删除</a>
            </td>
        </tr>
            <c:if test="${fn:length(note.revertList) != 0}">
                <tr id="tr${note.messageID}" class="collapse"><td colspan="8"><table class="table table-hover float-right" style="margin-left: 100px;max-width: 850px">
                    <thead>
                    <tr class="table-dark text-dark">
                        <th class="text-center">ID</th>
                        <th class="text-center">内容</th>
                        <th class="text-center">作者</th>
                        <th class="text-center">时间</th>
                        <th class="text-center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${note.revertList}" var="revert" varStatus="xh">
                        <tr class="table-secondary">
                            <td class="text-center">${xh.count}</td>
                            <td class="text-center"><textarea id="revert${revert.revertID}" class="form-control" readonly="readonly">${revert.content}</textarea></td>
                            <td class="text-center">${revert.writer}</td>
                            <td class="text-center"><fmt:formatDate value="${revert.writeDate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                            <td class="text-center">
                                <a class="btn-warning btn-sm" onclick="modifyRevert(${revert.revertID})">修改</a>
                                &nbsp
                                <a class="text-light btn-danger btn-sm" onclick="showFrame('${pageContext.request.contextPath}/admin/deleteRevert/${revert.revertID}')">删除</a>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table></td></tr>
            </c:if>
        </c:forEach>
    </table>

    <div>
        <ul id="page_list" class="pagination justify-content-center" style="margin-top: 10px"></ul>
    </div>
</div>
<c:if test="${not empty count}">
    <script src="${pageContext.request.contextPath}/static/js/pagination.js"></script>
    <script>
        var count = ${count};
        pagination($("#page_list"), ${page}, Math.ceil(count / 10), "${pageContext.request.contextPath}/admin/manageNote/");
    </script>
</c:if>
<script>
    var content_path = "${pageContext.request.contextPath}";
    function modifyMessage(ID){
        var ncontent = $("#ncontent"+ID);
        var ntitle = $("#ntitle"+ID);
        if(typeof(ntitle.attr("readonly"))=="undefined"){
            $.ajax({
                url: content_path+"/admin/updateMessage",
                type:'POST',
                data:{"messageID":ID,"title": ntitle.val(), "content": ncontent.val()},
                dataType:'json',
                success:function(data){
                    if(data["result"]==1){
                        ntitle.attr("readonly","readonly");
                        ncontent.attr("readonly","readonly");
                    }
                    $("#sm-info").text(data['info']);
                    setTimeout(function () {
                        $("#sm-info").text("");
                    }, 3000);
                }
            });

        }else {
            ncontent.removeAttr("readonly");
            ntitle.removeAttr("readonly");
            ncontent.css('height', 'auto').css('height', ncontent.prop('scrollHeight') + 'px');
            ncontent.after("<a class='btn-light btn-sm' onclick='javascript:location.reload()'>取消</a>")
        }
    }
    function modifyRevert(ID) {
        var rcontent = $("#revert"+ID);
        if(typeof(rcontent.attr("readonly"))=="undefined"){
            $.ajax({
                url: content_path+"/admin/updateRevert",
                type:'POST',
                data:{"revertID":ID,"content": rcontent.val()},
                dataType:'json',
                success:function(data){
                    if(data["result"]==1){
                        rcontent.attr("readonly","readonly");
                    }
                    $("#sm-info").text(data['info']);
                    setTimeout(function () {
                        $("#sm-info").text("");
                    }, 3000);
                }
            });
        }else {
            rcontent.removeAttr("readonly");
            rcontent.css('height', 'auto').css('height', rcontent.prop('scrollHeight') + 'px');
        }
    }


</script>
<script src="${pageContext.request.contextPath}/static/js/showFrame.js"></script>
</body>
</html>
